<template>
  <view class="security-wrap">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="充电设置"></van-nav-bar>
    <!-- #endif -->
    <view class="security-item">
      <view class="security-left">
        <view class="setitemname">SOC自动停充开关</view>
        <view class="tips">
          开启后，充电过程中SOC达以下设置值，则立即停止充电，当前设置仅对直流桩有效。
        </view>
      </view>
      <view class="security-right">
        <switch
          @change="switchChange"
          :color="'#5073F7'"
          :checked="data.socSwitch"
          style="zoom: 0.6" />
      </view>
    </view>
    <view class="security-item">
      <view class="security-left">
        <view class="setitemname">自动停充SOC</view>
      </view>
      <view class="security-right">
        <input
          class="content-input"
          v-model="data.socThreshold"
          :disabled="!data.socSwitch"
          placeholder="请输入自动停充SOC" />
        %
      </view>
    </view>
    <view class="tips-wrap">
      <view class="title">
        <icon class="iconfont icon-tixing"></icon>
        <text class="text">温馨提示</text>
      </view>
      <view class="detail">
        SOC：电池荷电状态，也叫剩余电量，代表的是电池使用一段时间或长期搁置不用后的剩余可放电电量与其完全充电状态的电量的比值。
        <br />
        电动车充电过程中，SOC欲充达100%，最后充电阶段充电电流会呈下降趋势；电池过充而导致的电池损坏，可能会引发充电事故。用户结合自身用车场景以及里程需求，设定合适的停充SOC值，可以使电池长期保持浅充浅放状态，不仅可以延长电池使用寿命，还可以有效的降低充电时长。
      </view>
    </view>
    <view class="bottom-wrap" :style="styleBottom">
      <button class="bnt-wrap bnt-pay" @tap="sure">确认</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { getSystemInfo, setToastInstance, systemInfo } from '@mixins/info';
import { querySocConfig, updateSocConfig } from '@/service/apis/mine';
import { getItem } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const styleBottom = `height: calc(124rpx + ${getSystemInfo().safeBottom}px)`;
const $toast: any = inject('$Toast');

let data = reactive({
  socSwitch: false,
  socThreshold: '0',
});

querySocConfig({}, { account: { accountId: getItem('userid') } }).then((res: any) => {
  if (res) {
    data.socSwitch = res.socSwitch;
    data.socThreshold = res.socThreshold;
    console.log(res);
  }
});
const switchChange = (obj: any) => {
  data.socSwitch = obj.detail.value;
};
const sure = () => {
  if (data.socThreshold) {
    $toast('请输入自动停充SOC');
  }
  if (!new RegExp(/^([0-9]{1,2}|100)$/).test(data.socThreshold)) {
    $toast('请输入正确的自动停充SOC（0-100的整数）');
    return;
  }
  updateSocConfig(data, { account: { accountId: getItem('userid') } }).then((res: any) => {
    if (res) {
      $toast('修改成功');
      uni.navigateBack({
        delta: 1,
      });
      // uni.navigateTo({
      //   url: `/pagesMyCenter/setting/setting`,
      // });
    }
  });
};

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>
<style lang="scss">
page {
  background-color: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.security-wrap {
  background-color: #fff;
  .security-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #f2f2f2;
    .security-left {
      .setitemname {
        font-size: 16px;
        color: #242424;
        font-weight: 500;
      }
      .tips {
        font-size: 14px;
        color: #545454;
        margin-top: 4px;
      }
    }
    .security-right {
      padding-left: 16px;
      display: flex;
      align-items: center;
      font-size: 14px;
      .content-input {
        margin-right: 5px;
        height: 25px;
        width: 40px;
        padding: 0 5px;
        text-align: center;
      }
    }
  }
  .tips-wrap {
    padding: 16px;
    .title {
      .icon-tixing {
        font-size: 16px;
        color: #fa3939;
      }
      .text {
        font-size: 16px;
        color: #fa3939;
      }
    }
    .detail {
      font-size: 14px;
      color: #545454;
      line-height: 24px;
      margin-top: 8px;
    }
  }
  .bottom-wrap {
    position: fixed;
    width: 100vw;
    bottom: 0;
    background-color: #fff;
    z-index: 999;
    .bnt-pay {
      margin: 9px 0 9px 16px;
      width: 343px;
      height: 44px;
      border-radius: 50px;
    }
  }
}
</style>